<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="szhzrjForm" class="demo-form-inline">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">数字化注入井生产日报</div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        border
        stripe
      >
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" prop="rq" label="日期" width="100px">
        </el-table-column>
        <el-table-column prop="zyqmc" label="作业区" align="center">
        </el-table-column>
        <el-table-column prop="jmc" label="井名" align="center">
        </el-table-column>
        <el-table-column
          prop="zrsj"
          label="注入时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="zrfs" label="注入方式" align="center">
        </el-table-column>
        <el-table-column
          prop="yxzryl"
          label="允许注入压力（MPa）"
          align="center"
        >
        </el-table-column>
        <el-table-column label="昨日数据" align="center">
          <el-table-column
            label="注水压力（MPa）"
            align="center"
          >
            <el-table-column prop="zrsjby" label="泵压" align="center">
            </el-table-column>
            <el-table-column prop="zrsjyy" label="油压" align="center">
            </el-table-column>
            <el-table-column prop="zrsjty" label="套压" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="水表读数（m3）"
            align="center"
          >
            <el-table-column prop="zrsjshi" label="始" align="center">
            </el-table-column>
            <el-table-column prop="zrsjzhong" label="终" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="zrsjrzrl" label="日注入量(m3/d)" align="center">
          </el-table-column>
          <el-table-column prop="zrsjrpzl" label="日配注量(m3/d)" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="今日数据" align="center">
          <el-table-column
            label="注水压力（MPa）"
            align="center"
          >
            <el-table-column prop="jrsjby" label="泵压" align="center">
            </el-table-column>
            <el-table-column prop="jrsjyy" label="油压" align="center">
            </el-table-column>
            <el-table-column prop="jrsjty" label="套压" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column label="水表读数（m3）" align="center">
            <el-table-column prop="jrsjshi" label="始" align="center">
            </el-table-column>
            <el-table-column prop="jrsjzhong" label="终" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="jrsjrzrl" label="日注入量(m3/d)" align="center">
          </el-table-column>
          <el-table-column prop="jrsjrpzl" label="日配注量(m3/d)" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="今日与昨日数据差值" align="center">
          <el-table-column label="注水压力（MPa）" align="center">
            <el-table-column prop="zrjrsjbycz" label="泵压" align="center">
            </el-table-column>
            <el-table-column prop="zrjrsjyycz" label="油压" align="center">
            </el-table-column>
            <el-table-column prop="zrjrsjtycz" label="套压" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="zrjrsjrzrlcz" label="日注入量(m3/d)" align="center">
          </el-table-column>
          <el-table-column prop="zrjrsjrpzlcz" label="日配注量(m3/d)" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="今日" align="center">
          <el-table-column prop="jrbjy" label="泵压-油压（MPa）" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bz" label="备注" width="100" align="center">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import szhzrjApi from "@/api/szhzrjscrbsj";

export default {
  data() {
    return {
      show: false, //隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1, //当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      searchDate: null,
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      approveStatus: "",
      szhzrjForm: {},
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted() {
    this.search(this.pageNo, this.pageSize);
  },
  methods: {
    /**
     * 查询列表
     */
    async search(pageNo, pageSize, approveStatus, startDate, endDate) {
      let res = await szhzrjApi.getDataList(
        pageNo,
        pageSize,
        startDate,
        endDate
      );
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    //条件查询
    formSearch() {
      console.log(this.searchDate);
      if (!this.searchDate) {
        this.search(this.pageNo, this.pageSize);
      } else {
        this.search(
          this.pageNo,
          this.pageSize,
          this.approveStatus,
          this.searchDate[0],
          this.searchDate[1]
        );
      }
    },
    //下载
    download() {
      import("@/vendor/Export2Excel").then((excel) => {
        const multiHeader = [
          [
            "数字化注入井生产日报",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "", //30行
          ],
          [
            "序号",
            "日期",
            "作业区",
            "注采班",
            "配注（水）间",
            "井号",
            "生产时间(H:min)",
            "注入方式",
            "允许注入压力(MPa)",
            "昨日数据",
            "",
            "",
            "",
            "",
            "",
            "",
            "今日数据",
            "",
            "",
            "",
            "",
            "",
            "",
            "今日与昨日数据差值",
            "",
            "",
            "",
            "",
            "今日",
            "备注",
          ], //第一行30
          [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "注水压力",
            "",
            "",
            "水表读数(m3)",
            "",
            "日注入量(m3/d)",
            "日配注量(m3/d)",
            "注水压力(MPa)",
            "",
            "",
            "水表读数(m3)",
            "",
            "日注入量(m3/d)",
            "日配注量(m3/d)",
            "注水压力(MPa)",
            "",
            "",
            "日注入量(m3/d)",
            "日配注量(m3/d)",
            "泵压-油压(MPa)",
            "",
          ], //第二行30
        ]; // 前三行的表头数据，二维数组，不够的用空白补全
        const header = [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "泵压",
          "油压",
          "套压",
          "始",
          "终",
          "",
          "",
          "泵压",
          "油压",
          "套压",
          "始",
          "终",
          "",
          "",
          "泵压",
          "油压",
          "套压",
          "",
          "",
          "",
          "",
        ]; // 最后一行的表头数据
        const filterVal = [
          "rq",
          "index",
          "operaArea",
          "zcb",
          "psj",
          "poundSign",
          "proTime",
          "injectMethod",
          "pressValue",
          "zrzsylBy",
          "zrzsylYy",
          "zrzsylTy",
          "zrsbdsStart",
          "zrsbdsEnd",
          "zrrzrl",
          "zrrpzl",
          "zsylBy",
          "zsylYy",
          "zsylTy",
          "sbdsStart",
          "sbdsEnd",
          "rzrl",
          "rpzl",
          "jzrzsylBy",
          "jzrzsylYy",
          "jzrzsylTy",
          "jzrrzrl",
          "jzrrpzl",
          "byY",
          "bz",
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        const merges = [
          "A1:AD1",
          "A2:A4",
          "B2:B4",
          "C2:C4",
          "D2:D4",
          "E2:E4",
          "F2:F4",
          "G2:G4",
          "H2:H4",
          "I2:I4",
          "AD2:AD4",
          "J2:P2",
          "Q2:W2",
          "X2:AB2",
          "J3:L3",
          "M3:N3",
          "O3:O4",
          "P3:P4",
          "Q3:S3",
          "T3:U3",
          "V3:V4",
          "W3:W4",
          "X3:Z3",
          "AA3:AA4",
          "AB3:AB4",
          "AC3:AC4",
        ]; // 合并单元格的数据，如何合并参考上面图片的蓝色背景部分
        excel.export_json_to_excel({
          multiHeader,
          header,
          filename: "数字化注入井生产日报",
          autoWidth: true,
          merges,
          data,
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize;
    },
  },
};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
